<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Busca de Técnico | Eletronorte</title>
        <h:outputStylesheet library="css" name="style.css" />
        <link rel="icon" href="#{request.contextPath}/_img/favicon.ico" type="image/ico" />
    </h:head>

    <h:body>
        
        <p:dialog widgetVar="statusDialog" modal="true" draggable="false"
                  closable="false" resizable="false" showHeader="false"
                  onShow="document.getElementById('interface').className += ' modal';
                          document.body.className += ' modal-open'"
                  onHide="document.getElementById('interface').className =
                          document.getElementById('interface').className.replace(/(?:^|\s)modal(?!\S)/g , '');
                          document.body.className =
                          document.body.className.replace(/(?:^|\s)modal-open(?!\S)/g , '')">
            <h:graphicImage library="img" name="ajax-loader.gif" />
        </p:dialog>
        
        <div id="interface">
            <table id="table-header" cellpadding="0" cellspacing="0">
                <!-- TOPO -->
                <tr>
                    <td><ui:include src="/pages/template/header.xhtml" /></td>
                </tr>

                <!--  MENU -->
                <tr>
                    <td><ui:include src="/pages/protected/consultor/menu.xhtml" /></td>
                </tr>
            </table>

            <h:form id="form1" enctype="multipart/form-data" style="margin:30px 29px 10px 29px">

                <p:growl id="campoObrigatorio" life="4000" showDetail="false"
                         rendered="#{facesContext.validationFailed == true}" />                
                <p:growl for="sucesso" id="sucesso" life="4000" showDetail="true" />
                <p:growl for="vazia" id="vazia" life="4000" showDetail="true" />
                <p:growl for="atencao" id="atencao" life="4000" showDetail="true" />

                <p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />

                <p:panelGrid style="width:100%">
                    <f:facet name="header">
                        <p:row>
                            <p:column styleClass = "ui-widget-header" colspan="2">
                                BUSCA DE TÉCNICO
                            </p:column>
                        </p:row>
                    </f:facet>
                    <p:row>
                        <p:column style="width: 30%;text-align:right">
                            <h:outputLabel for="nome" value="Nome:" />
                        </p:column>
                        <p:column style="text-align:left">
                            <p:inputText id="nome" label="Nome" size="65"
                                         value="#{tecnicoBean.buscaNome}" required="true"
                                         requiredMessage="Campo Nome obrigatório!">
                                <p:focus for="nome" />
                            </p:inputText>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2">
                            <p:commandButton value="Buscar"
                                             action="#{tecnicoBean.buscarTecnico()}"
                                             ajax="true" update=":formBusca sucesso campoObrigatorio vazia"/>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </h:form>

            <div align="center" style="margin:30px 29px 10px 29px">
                <p:panelGrid style="width:100%">
                    <f:facet name="header">
                        <p:row>
                            <p:column styleClass = "ui-widget-header">
                                Resultados da Busca
                            </p:column>
                        </p:row>
                    </f:facet>
                    <p:row>
                        <p:column>
                            <h:form id="formBusca">
                                <p:dataTable var="tecnico"
                                             value="#{tecnicoBean.tecnicosBuscados}"
                                             paginator="true" rows="10" emptyMessage="" paginatorAlwaysVisible="false"
                                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                             currentPageReportTemplate="{currentPage} de {totalPages}"
                                             rowsPerPageTemplate="5,10,15" id="tabelaTecnico" lazy="true">
                                    <p:column headerText="Nome">
                                        <h:outputText value="#{tecnico.nome}" />
                                    </p:column>
                                    <p:column headerText="Telefone" width="200">
                                        <h:outputText value="#{tecnico.telefone}" />
                                    </p:column>
                                    <p:column headerText="Opções" width="170" style="text-align:center">
                                        <p:commandLink title="Visualizar"
                                                       update=":formVisualizar:Visualizar"
                                                       oncomplete="PF('dialogVisualizar').show()" immediate="true">
                                            <h:outputText value="Visualizar" />
                                            <f:setPropertyActionListener target="#{tecnicoBean.tecnico}"
                                                                         value="#{tecnico}" />
                                        </p:commandLink>
                                    </p:column>
                                </p:dataTable>
                            </h:form>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </div>
            
            <!-- RODAPE -->
            <table id="table-footer">
                <ui:include src="/pages/template/footer.xhtml" />
            </table>
        </div>
        
        <h:form id="formVisualizar">
            <p:dialog header="Visualizar Técnico" id="Visualizar" resizable="false"
                      widgetVar="dialogVisualizar" modal="true" draggable="false"
                      onShow="document.getElementById('interface').className += ' modal';
                              document.body.className += ' modal-open'"
                      onHide="document.getElementById('interface').className =
                              document.getElementById('interface').className.replace(/(?:^|\s)modal(?!\S)/g , '');
                              document.body.className =
                              document.body.className.replace(/(?:^|\s)modal-open(?!\S)/g , '')">
                <p:panelGrid id="panelVisualizar" >
                    <p:row>
                        <p:column style="text-align:left">
                            <h:outputText value="Nome:" />
                        </p:column>
                        <p:column style="text-align:left">
                            <h:outputText value="#{tecnicoBean.tecnico.nome}" />
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column style="text-align:left">
                            <h:outputText value="Telefone:" />
                        </p:column>
                        <p:column style="text-align:left">
                            <h:outputText value="#{tecnicoBean.tecnico.telefone}" />
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2" style="text-align:center">
                            <p:commandButton value="Fechar" oncomplete="PF('dialogVisualizar').hide()" />
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:dialog>
        </h:form>
        
    </h:body>
</html>